const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const TerserWebpackPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');


//  


const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
const {
    resolve
} = require('path');


module.exports = {
    // webpack 配置

    //入口起点
    entry: {
        commonCSS: "./src/js/common/commonCSS.js",
        dom: './src/js/common/dom.js',
        utils: './src/js/common/utils.js',

        // 页面
        index: './src/js/index.js',
        login: './src/js/login.js',
        register: './src/js/register.js',
        adv: './src/js/adv.js',
        mine: './src/js/mine.js',
        mineInfo: './src/js/mineInfo.js',
        run: './src/js/run.js',
        // 跑步中
        runing: './src/js/runing.js',
        countDown: "./src/js/countDown.js",
        // 课程
        courseTrain: "./src/js/courseTrain.js",
        // 骑行
        riding: "./src/js/riding.js",
        // 结束跑步
        runend: './src/js/runend.js',
        projectTrain: './src/js/projectTrain.js',
        projectDes: './src/js/projectDes.js',
        // 勋章页面
        myBadge: './src/js/myBadge.js',
        sportsData: './src/js/sportsData.js'

    },

    //输出到那个目录
    output: {
        filename: "js/[name].[contenthash].js",
        // __dirname表示是当前文件目录的绝对路径 +build
        path: resolve(__dirname, "dist")
    },



    // loader配置
    module: {

        rules: [{
                // 匹配那些文件
                test: /\.css$/, //处理css文件
                use: [
                    // "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        },
                    },
                    'css-loader',
                    'postcss-loader'
                ],

            },

            // less处理
            {
                test: /\.less$/,
                use: [
                    // "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        },
                    },
                    "css-loader",
                    'postcss-loader',
                    "less-loader"
                ]
            },



            // 图片处理
            {
                test: /\.(png|jpeg|jpg|gif|mp4)$/,
                loader: 'url-loader',

                options: {
                    name: "[contenthash:8].[name].[ext]", //改变图片名字
                    outputPath: "img",
                    limit: 10 * 1024, //限制大小,大于这个大小的就不为base64编码
                    esModule: false //关闭es6模块
                }
            },

            // 字体
            {
                test: /\.(svg|ttf|eot|woff(2)?|otf)$/,
                loader: "file-loader",
                options: {
                    outputPath: "font",
                    name: "[contenthash:8].[name].[ext]"
                }
            },

            // html图片
            {
                test: /\.html$/,
                loader: "html-loader",
            },

            // babel 转换
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        cacheDirectory: true,
                        // plugins: ['@babel/plugin-transform-runtime']
                    },
                }
            },
        ]
    },

    // 代码分割
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    },





    // 插件
    plugins: [


        // "transform - runtime", {

        //     "helpers": false,
        //     "polyfill": false,
        //     "regenerator": true,
        //     "moduleName": "babel - runtime"
        // },
        // 每次先清除文件
        new CleanWebpackPlugin(),
        // 压缩css
        new OptimizeCssAssetsPlugin(),
        // 详细的插件
        new MiniCssExtractPlugin({
            filename: './css/[name].[contenthash:5].css',

        }),

        // 创建多个html文件
        new HtmlWebpackPlugin({
            template: "./src/page/index.html", //需要复制的模板
            title: "index", //标题
            filename: "index.html", // 设置打包后html名称 ,可以生成目录位置
            chunks: ["commonCSS", "dom", "utils", "index"] //设置不同的chunks,需要引入的模块

        }),
        new HtmlWebpackPlugin({
            template: "./src/page/login.html",
            title: "login",
            filename: "login.html",
            chunks: ["commonCSS", "login", "dom", "utils"]
        }),
        new HtmlWebpackPlugin({
            template: "./src/page/register.html",
            filename: "register.html",
            title: "register",
            chunks: ["commonCSS", "register", "dom", "utils"]

        }),



        // 广告页
        new HtmlWebpackPlugin({
            template: "./src/page/adv.html",
            filename: "adv.html",
            title: "adv",
            chunks: ["commonCSS", "adv", "dom", "utils"]
        }),


        // 首页 我的
        new HtmlWebpackPlugin({
            template: "./src/page/mine.html",
            filename: "mine.html",
            title: "mine",
            chunks: ["commonCSS", "mine", "dom", "utils"]
        }),

        // 我的修改页面
        new HtmlWebpackPlugin({
            template: "./src/page/mineInfo.html",
            filename: "mineInfo.html",
            title: "mineInfo",
            chunks: ["commonCSS", "mineInfo", "dom", "utils"]
        }),


        // 运动 跑步页面
        new HtmlWebpackPlugin({
            template: "./src/page/run.html",
            filename: "run.html",
            title: "run",
            chunks: ["commonCSS", "run", "dom", "utils"]
        }),

        // 运动 骑行页面
        new HtmlWebpackPlugin({
            template: "./src/page/riding.html",
            filename: "riding.html",
            title: "riding",
            chunks: ["commonCSS", "riding", "dom", "utils"]
        }),

        // 运动 课程训练页面
        new HtmlWebpackPlugin({
            template: "./src/page/courseTrain.html",
            filename: "courseTrain.html",
            title: "courseTrain",
            chunks: ["commonCSS", "courseTrain", "dom", "utils"]
        }),

        // 开始倒计时
        new HtmlWebpackPlugin({
            template: "./src/page/countDown.html",
            filename: "countDown.html",
            title: "countDown",
            chunks: ["commonCSS", "countDown", "dom", "utils"]
        }),

        // 运动开始页面
        new HtmlWebpackPlugin({
            template: "./src/page/runing.html",
            filename: "runing.html",
            title: "runing",
            chunks: ["commonCSS", "runing", "dom", "utils"]
        }),


        // 运动结束页面
        new HtmlWebpackPlugin({
            template: "./src/page/runend.html",
            filename: "runend.html",
            title: "runend",
            chunks: ["commonCSS", "runend", "dom", "utils"]
        }),


        // 课程介绍
        new HtmlWebpackPlugin({
            template: "./src/page/projectDes.html",
            filename: "projectDes.html",
            title: "projectDes",
            chunks: ["commonCSS", "projectDes", "dom", "utils", "video"]
        }),


        // 课程训练
        new HtmlWebpackPlugin({
            template: "./src/page/projectTrain.html",
            filename: "projectTrain.html",
            title: "projectTrain",
            chunks: ["commonCSS", "projectTrain", "dom", "utils"]
        }),

        // 勋章页面
        new HtmlWebpackPlugin({
            template: "./src/page/myBadge.html",
            filename: "myBadge.html",
            title: "myBadge",
            chunks: ["commonCSS", "myBadge", "dom", "utils"]
        }),

        // 运动数据
        new HtmlWebpackPlugin({
            template: "./src/page/sportsData.html",
            filename: "sportsData.html",
            title: "sportsData",
            chunks: ["commonCSS", "sportsData", "dom", "utils"]
        }),




    ],
    // socrcemap:,

    devServer: {
        contentBase: resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip压缩
        port: 8888, // 端口
        open: true, // 自动打开浏览器
        hot: true,
        openPage: "adv.html"
    },


    mode: "development" //开发模式

}